<!-- 页面外套 -->
<div class="page-wrapper" id="design_admin">

    <!-- 数据网格 -->
    <div class="datagrid datagrid-striped">
        <!-- 工具条组 -->
        <div class="tool-group">
            <form class="tool-search">
                <input type="hidden" name='page'>
                <input type="hidden" name='recPerPage'>
                <div class="im-label">
                    <div class="input-group">
                        <select class="form-control" name="sid">
                            <option value="1">项目编号</option>
                            <option value="1">项目名称</option>
                            <option value="1">装修地址</option>
                            <option value="1">信息员  </option>
                            <option value="1">业务员  </option>
                            <option value="1">项目联系人</option>
                            <option value="1">手机号码</option>
                        </select>
                        <span class="input-group-addon fix-border fix-padding"></span>
                        <input type="text" class="form-control" name="search">
                    </div>
                </div>
                <label>
                    <span>项目状态：</span>
                    <select class="form-control" name="state">
                        <option value="0">全部</option>
                        <option value="1">在谈</option>
                        <option value="2">已签</option>
                        <option value="3">未签申请中</option>
                        <option value="4">未签已归库</option>
                        <option value="5">不准申请中</option>
                        <option value="6">不准已归库</option>
                    </select>
                </label>
                <label>
                    <span>洽谈级别：</span>
                    <select class="form-control" name="level">
                        <option value="0">全部</option>
                        <option value="A">A</option>
                        <option value="B">B</option>
                        <option value="C">C</option>
                        <option value="D">D</option>
                        <option value="E">E</option>
                        <option value="F">F</option>
                    </select>
                </label>
                <div class="im-label">
                    <span>时间：</span>
                    <div class="input-group">
                        <input type="text" class="form-control" name="starttime" readonly> 
                        <span class="input-group-addon fix-border fix-padding"></span>
                        <input type="text" class="form-control" name="endtime"readonly>
                    </div>
                </div>
                <label><button type="button" class="btn btn-primary tool_search_btn"><i class="icon icon-search"></i> 搜索</button></label>
                <div class="clearfix"></div>
            </form>
            <div class="tool-deal">
                <label><button class="btn btn-primary tool_turn_btn">  <i class="icon icon-exchange"></i>     转移客户</button></label>
                <label><button class="btn btn-primary tool_change_btn"><i class="icon icon-signin"></i>       客户交接</button></label>
                <label><button class="btn btn-primary tool_export_btn"><i class="icon icon-external-link"></i>导出在谈跟单情况</button></label>
                <div class="clearfix"></div>
            </div>
        </div>
        <!-- tool-group -->

        <div class="datagrid-container"></div>
        <ul class="pager btn-mini" data-elements="prev,pages,next"></ul>
    </div>
    <!-- datagrid -->
 
    <!-- 转移客户 -->
    <div class="modal modal-for-page fade tool_turn_box" aria-hidden="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
                    <h4 class="modal-title">转移客户</h4>
                </div>
                <div class="modal-body">
                    <form class="container form-horizontal">
                        <input type="hidden" name="ids">
                        <div class="form-group">
                            <label class="col-sm-2 required">项目编号</label>
                            <div class="col-sm-8"><input type="text" class="form-control" readonly name="item"></div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 required">原设计师</label>
                            <div class="col-sm-8"><input type="text" class="form-control" readonly name="pre"></div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 required">新设计师</label>
                            <div class="col-sm-8"><select class="form-control tool_turn_box_newDesigner" name="new"><!--JS推进--></select></div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary tool_turn_submit">提交</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 客户交接 -->
    <div class="modal modal-for-page fade tool_change_box">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
                    <h4 class="modal-title">客户交接</h4>
                </div>
                <div class="modal-body">
                    <form class="container form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-2 required">离职人员</label>
                            <div class="col-sm-8"><select class="form-control tool_change_box_selectQuit"   name="quit"><!-- JS推进 --></select></div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 required">目标人员</label>
                            <div class="col-sm-8"><select class="form-control tool_change_box_selectTarget" name="target"><!-- JS推进 --></select>
                                <span class="text-gray">注：业务人员项目交接。是指将“离职人员”名下所有“正跟踪”和“在谈”项目转到“目标人员”名下</span>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary tool_change_submit">提交</button>
                </div>
            </div>
        </div>
    </div>

</div>
<!-- page-wrapper -->


<!-- 项目分单详情 -->
<div class="detail-wrapper mode-show" id="design_admin_detail">
    
    <!-- 详情弹框 -->
    <div class="modal modal-for-page fade detail_box" aria-hidden="false">
        <div class="modal-dialog modal-fullscreen">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
                    <h4 class="modal-title">项目管理详情</h4>
                </div>
                <div class="modal-body modal-scroll">

                    <!-- 操作按钮 -->
                    <button class="btn" data-dismiss="modal"><i class="icon icon-arrow-left"></i>  返回</button>

                    <!-- 数据表单 -->
                    <form class="detail_box_form">
                        <input type="hidden" name="detailId">
                        <table class="table"><!--JS推进--></table>
                    </form>

                    <!-- 切换表格 -->
                    <ul class="nav nav-tabs">
                        <li class="active"><a data-tab="" href=".detail_tab1">业务回访</a></li>
                        <li><a data-tab="" href=".detail_tab2">设计回访</a></li>
                        <li><a data-tab="" href=".detail_tab3">过程记录</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active detail_tab1">
                            <form class="tool-search">
                                <input type="hidden" name='page'>
                                <input type="hidden" name='recPerPage'>
                                <input type="hidden" name="detailId" value="null">
                            </form>
                            <div class="datagrid datagrid-striped">
                                <div class="datagrid-container"></div>
                                <ul class="pager btn-mini" data-elements="first_icon,prev_icon,next_icon,last_icon,size_menu,goto,page_of_total_text" data-menu-direction="dropup"></ul>
                            </div>
                        </div>
                        <div class="tab-pane detail_tab2">
                            <form class="tool-search">
                                <input type="hidden" name='page'>
                                <input type="hidden" name='recPerPage'>
                                <input type="hidden" name="detailId" value="null">
                            </form>
                            <div class="datagrid datagrid-striped">
                                <div class="datagrid-container"></div>
                                <ul class="pager btn-mini" data-elements="first_icon,prev_icon,next_icon,last_icon,size_menu,goto,page_of_total_text" data-menu-direction="dropup"></ul>
                            </div>
                        </div>
                        <div class="tab-pane detail_tab3">
                            <form class="tool-search">
                                <input type="hidden" name='page'>
                                <input type="hidden" name='recPerPage'>
                                <input type="hidden" name="detailId" value="null">
                            </form>
                            <div class="datagrid datagrid-striped">
                                <div class="datagrid-container"></div>
                                <ul class="pager btn-mini" data-elements="first_icon,prev_icon,next_icon,last_icon,size_menu,goto,page_of_total_text" data-menu-direction="dropup"></ul>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    
    <!-- 经理批复 -->
    <div class="modal modal-for-page fade detail_reply_box" aria-hidden="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
                    <h4 class="modal-title">经理批复</h4>
                </div>
                <div class="modal-body">
                    <form class="container form-horizontal">
                        <input type="hidden" name="detailId">
                        <div class="form-group">
                            <label class="col-sm-2">经理批复</label>
                            <div class="col-sm-8"><textarea class="form-control" name="text"></textarea></div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary detail_reply_submit">提交</button>
                </div>
            </div>
        </div>
    </div>

</div>

<script>
$(function() {
    //变量声明-----------------------------------------------------------------------------------------------
    var design_admin = $("#design_admin"); //页面ID
    var design_admin_api = {
        datagrid : API.test_datagrid, // 数据表格
        turn : API.test_response, // 转移客户
        change : API.test_response, // 客户交接
        export : API.test_response, // 导出
        designer : LOCAL + "Test/test_select.json", //转移客户-新设计师
        quit : LOCAL + "Test/test_select.json", //下拉选择
        target : LOCAL + "Test/test_select.json", //下拉选择
        show : LOCAL + "Test/Template/customer.json", // 详情查看
        save : API.test_response, // 详情保存
        reply : API.test_response, // 经理批复
        tab1 : API.test_datagrid, // 切换表格1
        tab2 : API.test_datagrid, // 切换表格2
        tab3 : API.test_datagrid, // 切换表格3
    }

    //组件实例化---------------------------------------------------------------------------------------------
    design_admin.find('[name="starttime"]').datetimepicker(option_date);
    design_admin.find('[name="endtime"]').datetimepicker(option_date);

    //数据表格-----------------------------------------------------------------------------------------------
    //数据源
    var design_admin_dataSource = {
        cols   : [
            {name: "datetime",label: "时间",width: 140},
            {name: "name", label: "项目编号",width: 90,html: true,
                valueOperator: {
                    getter: function(dataValue, cell) {
                        return `<a class="line_show_btn" dataId="${cell.config.data.id}">${dataValue}</a>`;
                    }
                }
            },
            {name: "text4",label: "项目名称",width: 90},
            {name: "text4",label: "联系人1",width: 90},
            {name: "text4",label: "装修地址",width: 90},
            {name: "text4",label: "信息员",width: 90},
            {name: "text4",label: "业务员",width: 90},
            {name: "text4",label: "主案设计师",width: 90},
            {name: "text4",label: "房源状态",width: 90},
            {name: "text4",label: "洽谈级别",width: 90},
            {name: "text4",label: "项目状态",width: 90},
            {name: "text4",label: "回访过期",width: 100}
        ],
        remote : function(){
            return zui_datagrid_remote({
                page_dom : design_admin, 
                url      : design_admin_api.datagrid
            });
        },
        remoteConverter : function(data){ 
            return zui_datagrid_filter({
                page_dom : design_admin,
                data     : data
            });
        }
    };
    //实例化
    design_admin.find('.datagrid').datagrid(
        zui_datagrid_option({
            checkable  : true,
            datagrid   : design_admin.find('.datagrid'),
            dataSource : design_admin_dataSource
        })
    );
    //搜索
    design_admin.find('.tool_search_btn').click(function(){ 
        zui_datagrid_render({
            datagrid_obj : design_admin.find('.datagrid').data("zui.datagrid"),
            dataSource   : design_admin_dataSource
        }); 
    });

    //工具条-转移客户
    design_admin.on('click', '.tool_turn_btn', function(){
        common_form_reset();
        //ID获取
        var data_arr = design_admin.find('.datagrid').data("zui.datagrid").getCheckItems().filter(function(e){return e});
        if (data_arr.length > 0) {

            //ID获取
            var data_id = [];
            for (var i = 0; i < data_arr.length; i++) {
                data_id.push(data_arr[i].id);
            }

            //项目编号获取
            var data_item = [];
            for (var x = 0; x < data_id.length; x++) {
                data_item.push(data_arr[x].username);
            }

            //原商务专员获取
            var data_pre = [];
            for (var p = 0; p < data_id.length; p++) {
                data_pre.push(data_arr[p].name);
            }

            //数据赋值
            design_admin.find('.tool_turn_box [name="item"]').val(data_item.join(","));
            design_admin.find('.tool_turn_box [name="pre"]').val(data_pre.join(","));
            design_admin.find('.tool_turn_box [name="ids"]').val(data_id.join(","));

            //下拉获取
            um_select_option({
                dom : design_admin.find('.tool_turn_box_newDesigner'),
                url : design_admin_api.designer,
            });

            //面板显示
            design_admin.find('.tool_turn_box').modal('show');
        } else {
            um_tip("至少选择一条数据", "1000", "text-danger");
        }
    });
    //提交
    design_admin.on('click', '.tool_turn_submit', function(){
        um_data_submit({
            url : design_admin_api.turn,
            form : design_admin.find('.tool_turn_box form'),
            dataSource : design_admin_dataSource,
            checkClear : true
        });
    });

    //工具条-客户交接
    design_admin.on('click', '.tool_change_btn', function(){
        um_select_option({
            dom : design_admin.find('.tool_change_box_selectQuit'),
            url : design_admin_api.quit,
        });
        um_select_option({
            dom : design_admin.find('.tool_change_box_selectTarget'),
            url : design_admin_api.target,
        });
        design_admin.find('.tool_change_box').modal('show');
    });
    //提交
    design_admin.on('click', '.tool_change_submit', function(){
        um_data_submit({
            url : design_admin_api.change,
            form: design_admin.find('.tool_change_box form'),
            dataSource : design_admin_dataSource,
            checkClear : true
        });
    });

    //工具条-导出
    design_admin.on('click', '.tool_export_btn', function(){
        var data_arr = design_admin.find('.datagrid').data("zui.datagrid").getCheckItems().filter(function(e){return e});
        var data_id = [];
        for (var i = 0; i < data_arr.length; i++) {
            data_id.push(data_arr[i].id);
        }
        if (data_arr.length > 0) {
            $.ajax({
                url: design_admin_api.export,
                type: "post",
                dataType: "json",
                data: um_data_get( design_admin.find('form.tool-search') ),
                beforesend: function() {
                    um_tip("导出中…");
                },
                success: function(data) {
                    if (data.status > 0) {
                        window.open(API.test_export);
                    } else {
                        um_tip(data.message, "1500", "text-danger");
                    }
                }
            });
        } else {
            um_tip("至少选择一条数据", "1000", "text-danger");
        }
    });

    //详情部分---------------------------------------------------------------------------
    //变量声明
    var design_admin_detail = $("#design_admin_detail");
    var design_admin_detail_dataSource_tab1 = {
        cols   : [
            {name:"name",    label:"回访人",      width:80 },
            {name:"tex10",   label:"回访内容",    width:200},
            {name:"datetime",label:"回访时间",    width:140},
            {name:"datetime",label:"下次回访时间",width:140}
        ],
        remote : function(){
            return zui_datagrid_remote({
                page_dom : design_admin_detail.find('.detail_tab1'), 
                url      : design_admin_api.tab1
            });
        },
        remoteConverter : function(data){ 
            return zui_datagrid_filter({
                page_dom : design_admin_detail.find('.detail_tab1'),
                data     : data
            });
        }
    }
    var design_admin_detail_dataSource_tab2 = {
        cols   : [
            {name:"username",label:"回访人",      width:80 },
            {name:"datetime",label:"回访时间",    width:140},
            {name:"datetime",label:"下次回访时间",width:140},
            {name:"text5",   label:"负责人情况",  width:200},
            {name:"text2",   label:"对手进展",    width:80 },
            {name:"text2",   label:"跟进情况",    width:80 },
            {name:"state",   label:"现阶段困难",  width:180},
            {name:"text2",   label:"外协情况",    width:80 },
            {name:"text2",   label:"经理批复",    width:180,html: true,
                valueOperator: {
                    getter: function(dataValue, cell) {
                        return `<a class="detail_reply_btn" dataId="${cell.config.data.id}">${dataValue}</a>`;
                    }
                }
            }
        ],
        remote : function(){
            return zui_datagrid_remote({
                page_dom : design_admin_detail.find('.detail_tab2'), 
                url      : design_admin_api.tab2
            });
        },
        remoteConverter : function(data){ 
            return zui_datagrid_filter({
                page_dom : design_admin_detail.find('.detail_tab2'),
                data     : data
            });
        }
    }
    var design_admin_detail_dataSource_tab3 = {
        cols   : [
            {name:"username",label:"操作人",  width:80 },
            {name:"datetime",label:"操作时间",width:140},
            {name:"text5",   label:"过程说明",width:140}
        ],
        remote : function(){
            return zui_datagrid_remote({
                page_dom : design_admin_detail.find('.detail_tab3'), 
                url      : design_admin_api.tab3
            });
        },
        remoteConverter : function(data){ 
            return zui_datagrid_filter({
                page_dom : design_admin_detail.find('.detail_tab3'),
                data     : data
            });
        }
    }

    //详情弹框
    design_admin.on("click", '.line_show_btn', function() {
        var dataId = $(this).attr('dataId');
        design_admin_detail.find('[name="detailId"]').val(dataId); // 详情ID赋值(多个)
        //远程请求
        $.ajax({
            url     : design_admin_api.show,
            type    : "post",
            dataType: "json",
            data    : { id: dataId },
            success : function(data){
                if( data.status>0 ){
                    var data = data.data;
                    //基础表格
                    var temp = `
                    <thead><tr><td colspan="3"><div class="flex-box"><b>项目状态</b>${data.itemstatename}</div></td></tr></thead>
                    <tbody>
                        <tr>
                            <td><div class="flex-box"><b>项目编号</b>${data.number}</div></td>
                            <td><div class="flex-box"><b>项目名称</b>${data.case}</div></td>
                            <td><div class="flex-box"><b>项目类型</b>${data.typename}</div></td>
                        </tr>
                        <tr>
                            <td><div class="flex-box"><b>业务员</b>${data.salesman}</div></td>
                            <td><div class="flex-box"><b>信息员</b>${data.providername}</div></td>
                            <td><div class="flex-box"><b>设计师</b>${data.designer}</div></td>
                        </tr>
                        <tr>
                            <td><div class="flex-box"><b>联系人1</b>${data.user1}</div></td>
                            <td><div class="flex-box"><b>手机1</b>${data.tel1}</div></td>
                            <td><div class="flex-box"><b>办公电话</b>${data.tel0}</div></td>
                        </tr>
                        <tr>
                            <td><div class="flex-box"><b>房源状态</b>${data.sourcestatename}</div</td>
                            <td><div class="flex-box"><b>房屋状态</b>${data.housestatename}</div></td>
                            <td><div class="flex-box"><b>房屋类型</b>${data.housetypename}</div></td>
                        </tr>
                        <tr>
                            <td><div class="flex-box"><b>装修面积</b>${data.decoarea}</div></td>
                            <td><div class="flex-box"><b>装修意向</b>${data.decotodoname}</div></td>
                            <td><div class="flex-box"><b>装修服务</b>${data.decoservname}</div></td>
                        </tr>
                        <tr>
                            <td><div class="flex-box"><b>交房日期</b>${data.housedate1}</div></td>
                            <td><div class="flex-box"><b>期望工期</b>${data.housedate2}</div></td>
                            <td><div class="flex-box"><b>装修地址</b>${data.decoaddr}</div></td>
                        </tr>
                        <tr>
                            <td><div class="flex-box"><b>联系人2</b>${data.user2}</div></td>
                            <td><div class="flex-box"><b>手机2</b>${data.tel2}</div></td>
                            <td><div class="flex-box"><b>手机3</b>${data.tel3}</div></td>
                        </tr>
                        <tr>
                            <td><div class="flex-box"><b>对手数量</b>${data.rivalnumb}</div></td>
                            <td><div class="flex-box"><b>对手进展</b>${data.rivalstepname}</div></td>                        
                            <td></td>
                        </tr>
                        <tr>
                            <td><div class="flex-box"><b>乘车路线</b>${data.busline}</div></td>
                            <td colspan="2"><div class="flex-box"><b>办公地址</b>${data.addr}</div></td>
                        </tr>
                        <tr><td colspan="3"><div class="flex-box" style="height:35px;"><b>备注信息</b>${data.text}</div></td></tr>
                    </tbody>
                    `;
                    design_admin_detail.find('.detail_box .detail_box_form table').html(temp); // DOM填充
                    //切换表格刷新
                    zui_datagrid_render({
                        datagrid_obj : design_admin_detail.find('.detail_tab1 .datagrid').data("zui.datagrid"),
                        dataSource   : design_admin_detail_dataSource_tab1
                    });
                    zui_datagrid_render({
                        datagrid_obj : design_admin_detail.find('.detail_tab2 .datagrid').data("zui.datagrid"),
                        dataSource   : design_admin_detail_dataSource_tab2
                    });
                    zui_datagrid_render({
                        datagrid_obj : design_admin_detail.find('.detail_tab3 .datagrid').data("zui.datagrid"),
                        dataSource   : design_admin_detail_dataSource_tab3
                    });
                    design_admin_detail.find('.detail_box').modal('show'); // 弹框显示
                } else {
                    um_tip(data.message,"1500","text-danger");
                }
            }
        });
 
    });

    //切换表格-业务回访
    design_admin_detail.find('.detail_tab1 .datagrid').datagrid(
        zui_datagrid_option({
            height     : 400,
            datagrid   : design_admin_detail.find('.detail_tab1 .datagrid'),
            dataSource : design_admin_detail_dataSource_tab1
        })
    );
    //切换表格-设计回访
    design_admin_detail.find('.detail_tab2 .datagrid').datagrid(
        zui_datagrid_option({
            height     : 400,
            datagrid   : design_admin_detail.find('.detail_tab2 .datagrid'),
            dataSource : design_admin_detail_dataSource_tab2
        })
    );
    //切换表格-过程记录
    design_admin_detail.find('.detail_tab3 .datagrid').datagrid(
        zui_datagrid_option({
            height     : 400,
            datagrid   : design_admin_detail.find('.detail_tab3 .datagrid'),
            dataSource : design_admin_detail_dataSource_tab3
        })
    );

    //切换表格-设计回访-经理批复
    design_admin_detail.on("click", '.detail_reply_btn', function() {
        common_form_reset();
        design_admin_detail.find('.detail_reply_box').modal('show');
    });
    //提交
    design_admin_detail.on("click", '.detail_reply_submit', function() {
        um_data_submit({
            url         : design_admin_api.reply,
            form        : design_admin_detail.find('.detail_reply_box form'),
            datagridDom : design_admin.find('.datagrid'),
            dataSource  : design_admin_dataSource,
        });
    });

}); //预加载结尾
</script>
